<template>
  <div class="home">
    <div class="banner">
      <img alt="Vue logo" style="width: 64px; height: 64px" src="../assets/logo.png" />
      <h3 style="margin-top: 1rem">Welcome to Your Vue.js App</h3>
    </div>

    <br />

    <h2># 自定义表单字段组件封装</h2>

    <br />

    <h2># 动态组件案例</h2>
    <div>
      <button @click="(e) => changeTabs(item)" v-for="item in tabsList">{{ item.name }}</button>
      <div>
        <button @click="basicDynamicFieldConfigSaveEntityFun">新建测试表单字段</button>
      </div>
      <div>
        <p>预览</p>
        <a-form :form="form">
          <a-form-item :label="basicDynamicFieldConfigSaveEntityParams.fieldName">
            <a-input
              :disabled="basicDynamicFieldConfigSaveEntityParams.fieldMust == 1"
              :placeholder="basicDynamicFieldConfigSaveEntityParams.placeholder"
              v-if="basicDynamicFieldConfigSaveEntityParams.fieldType == 1"
              v-decorator="basicDynamicFieldConfigSaveEntityParams.fieldMust == 2 ? formItemRules : []"
            >
              <a-tooltip
                v-if="basicDynamicFieldConfigSaveEntityParams.explanationPrompt"
                slot="suffix"
                :title="basicDynamicFieldConfigSaveEntityParams.explanationPrompt"
              >
                <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
              </a-tooltip>
            </a-input>

            <a-textarea
              :disabled="basicDynamicFieldConfigSaveEntityParams.fieldMust == 1"
              :placeholder="basicDynamicFieldConfigSaveEntityParams.placeholder"
              v-decorator="basicDynamicFieldConfigSaveEntityParams.fieldMust == 2 ? formItemRules : []"
              v-if="basicDynamicFieldConfigSaveEntityParams.fieldType == 2"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            >
              <a-tooltip
                v-if="basicDynamicFieldConfigSaveEntityParams.explanationPrompt"
                slot="suffix"
                :title="basicDynamicFieldConfigSaveEntityParams.explanationPrompt"
              >
                <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
              </a-tooltip>
            </a-textarea>

            <a-input-number
              :disabled="basicDynamicFieldConfigSaveEntityParams.fieldMust == 1"
              :placeholder="basicDynamicFieldConfigSaveEntityParams.placeholder"
              v-if="basicDynamicFieldConfigSaveEntityParams.fieldType == 3"
              v-decorator="basicDynamicFieldConfigSaveEntityParams.fieldMust == 2 ? formItemRules : []"
            >
              <a-tooltip
                v-if="basicDynamicFieldConfigSaveEntityParams.explanationPrompt"
                slot="suffix"
                :title="basicDynamicFieldConfigSaveEntityParams.explanationPrompt"
              >
                <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
              </a-tooltip>
            </a-input-number>
          </a-form-item>
        </a-form>
      </div>
    </div>

    <br />

    <h2># Trend 组件</h2>

    <a-divider> 正常 </a-divider>

    <a-card>
      <trend flag="up" style="margin-right: 16px">
        <span slot="term">工资</span>
        5%
      </trend>
      <trend flag="up" style="margin-right: 16px">
        <span slot="term">工作量</span>
        50%
      </trend>
      <trend flag="down">
        <span slot="term">身体状态</span>
        50%
      </trend>
    </a-card>

    <a-divider> 颜色反转 </a-divider>

    <a-card style="margin-bottom: 3rem">
      <trend flag="up" :reverse-color="true" style="margin-right: 16px">
        <span slot="term">工资</span>
        5%
      </trend>
      <trend flag="down" :reverse-color="true" style="margin-right: 16px">
        <span slot="term">工作量</span>
        50%
      </trend>
    </a-card>

    <h2># AvatarList 组件</h2>

    <a-divider> AvatarList </a-divider>
    <a-card style="margin-bottom: 3rem">
      <avatar-list :max-length="3">
        <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
        <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
      </avatar-list>

      <a-divider type="vertical" style="margin: 0 16px" />

      <avatar-list size="mini">
        <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
        <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
      </avatar-list>
    </a-card>

    <h2># CountDown 组件</h2>

    <a-divider> CountDown </a-divider>
    <a-card style="margin-bottom: 3rem">
      <count-down style="font-size: 2rem" :target="new Date().getTime() + 3000000" :on-end="onEndHandle"> </count-down>

      <a-divider type="vertical" style="margin: 0 16px" />

      <count-down style="font-size: 2rem" :target="new Date().getTime() + 10000" :on-end="onEndHandle2"> </count-down>
    </a-card>

    <h2># Ellipsis 组件</h2>

    <a-divider> Ellipsis </a-divider>
    <a-card style="margin-bottom: 3rem">
      <ellipsis :length="100" tooltip>
        There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety
        recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
      </ellipsis>
    </a-card>

    <h2># NumberInfo 组件</h2>

    <a-divider> NumberInfo </a-divider>
    <a-card>
      <number-info
        :sub-title="
          () => {
            return 'Visits this week'
          }
        "
        :total="12321"
        status="up"
        :sub-total="17.1"
      ></number-info>
    </a-card>
  </div>
</template>

<script>
// @ is an alias to /src

import Trend from '@/components/Trend'
import AvatarList from '@/components/AvatarList'
import CountDown from '@/components/CountDown/CountDown'
import Ellipsis from '@/components/Ellipsis'
import NumberInfo from '@/components/NumberInfo'

const AvatarListItem = AvatarList.AvatarItem

// 动态菜单案例
import createFormItem from '@/mixins/createFormItem.js'

export default {
  name: 'Home',
  components: {
    NumberInfo,
    Ellipsis,
    CountDown,
    Trend,
    AvatarList,
    AvatarListItem,
  },
  mixins: [createFormItem, createForm],
  data() {
    return {
      targetTime: new Date().getTime() + 3900000,
    }
  },
  methods: {
    onEndHandle() {
      this.$message.success('CountDown callback!!!')
    },
    onEndHandle2() {
      this.$notification.open({
        message: 'Notification Title',
        description:
          'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      })
    },
  },
}
</script>

<style scoped>
.home {
  width: 900px;
  margin: 0 auto;
  padding: 25px 0;
}
.home > .banner {
  text-align: center;
  padding: 25px 0;
  margin: 25px 0;
}
</style>
